<template>
	<div class="mobile_search">
		<div class="top">
			<router-link to="/mobile/home" class="el-icon-arrow-left
"></router-link>
			<form @submit.prevent="setSearch()">
				<input class="input1" type="search" placeholder="  请输入书名,作者,出版社" required v-model="keywords" />
				<img class="img" src="../../assets/img/mobile/933daa57fe18b36173abd08176eabf7.png" />
				<input class="input2" type="submit" value="搜索" />
			</form>
		</div>
		<div class="searchType">
			<ul>
				<li>
					<router-link to="/">商品</router-link>
				</li>
				<li>
					<router-link to="/">书目</router-link>
				</li>
				<li>
					<router-link to="/">拍卖</router-link>
				</li>
				<li>
					<router-link to="/">店铺</router-link>
				</li>
			</ul>
		</div>

		<div v-show="type==0">
			<!-- 历史搜索 -->
			<div class="history">
				<h4>历史搜索</h4>
				<button class="el-icon-delete" @click="del()"></button>
			</div>


			<div class="history_text">
				<span v-for="(item,i) in hlist" :key="i">{{item}}</span>
			</div>

			<!-- 热门搜索 -->
			<div class="history">
				<h4>热门搜索</h4>
			</div>

			<div class="hotSearch">
				<span v-for="(item,i) in hotHistory" :key="i">{{item.name}}</span>
			</div>

			<div class="swiper-container typeList">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" v-for="(item,i) in typeList" :key="i">
						{{item.name}}
					</li>
				</ul>
			</div>
		</div>

		<div v-if="findbook.length==0" v-show="type==1">
			<p style="text-align: center; font-size: 1rem;">抱歉,未找到该关键词</p>
		</div>

		<div class="show" v-for="item in findbook" v-show="type==1">
			
			<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
			<div>
				<p>{{item.name}}</p>
				<p style="color: red;">￥:{{item.price}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	// 导入vuex的对象
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MobileSearch',
		data() {
			return {
				type: 0, //默认显示搜索页，点击搜索时改为1，显示搜索的书本
				findbook: [],
				keywords: '',
				hotHistory: [{
						name: '活着'
					}

				],

				// 榜单
				typeList: [{
					name: '推荐榜'
				}, {
					name: '人气榜'
				}, {
					name: '必读榜'
				}, {
					name: '完结榜'
				}, {
					name: '月票榜'
				}, {
					name: '飙升榜'
				}],
			}
		},
		mounted() {
			new Swiper('.typeList', {
				// 定义一次显示多少个轮播项之间的间距
				slidesPerView: 'auto',
				// 设置宽度自动显示的轮播项数量
				spaceBetween: 18
			});
		},
		computed: {
			...mapState('search', ['hlist']),
			...mapState('search', ['delHistoryList']),
		},
		methods: {
			// ES6写法 
			// 格式:mapActions('模块名',['调用模块的方法'])
			...mapActions('search', ['actionHistory']),

			setSearch() {
				this.type = 1;
				// 调用模块的函数actionHistory，并将当前组件的data函数传递过去vuex
				this.actionHistory(this.keywords);
				let a = 'key=' + this.keywords;

				// 模糊查询
				this.$axios.post("http://127.0.0.1/api/public/book/findPageKey/1/3", a).then((resp) => {
					console.log(resp.data.data);
					this.findbook = resp.data.data.books;
					console.log(a);
					console.log(this.findbook);
				})
				this.keywords = '';
			},

			del() {
				this.$store.commit('search/delHistoryList')
			},
		}
	}
</script>

<style scoped>
	.mobile_search {
		height: 600rem;
		background-color: white;
	}

	.mobile_search .top {
		display: flex;
		line-height: 5rem;
		/* margin: 0 0.6rem; */
		align-items: center;
		background-color: #d9d9d9;
	}

	.mobile_search .top a {
		font-size: 1.5rem;
		color: #343434;
		margin-top: 0.15rem;
		margin-left: 0.2rem;
	}

	.mobile_search .top form {
		width: 90%;
	}

	.mobile_search .top .input1 {
		height: 2rem;
		margin-left: 0.5rem;
		width: 80%;
		border-radius: 0.3rem;
		border: none;
	}

	.img {
		width: 1.5rem;
		position: absolute;
		margin-top: 1.85rem;
		margin-left: -1.89rem;
	}

	/* 搜索框 */
	.mobile_search .top .input2 {
		width: 18%;
		height: 2rem;
		border: none;
		font-size: 1.2rem;
		position: absolute;
		margin-top: 1.6rem;
		background-color: #ffffff;
		font-weight: 550;
		background-color: #d4d4d4;
	}

	.mobile_search .history {
		display: flex;
		justify-content: space-between;
		margin: 1rem 1rem;
	}

	.mobile_search .history button {
		border: none;
		font-size: 1.2rem;
		background-color: #ffffff;
	}

	.mobile_search .history_text {
		margin: 0 0.5rem;
	}

	.mobile_search .history_text span {
		background-color: #e1e1e1;
		border-radius: 0.2rem;
		margin: 0.5rem 0.5rem;
		text-align: center;
		line-height: 2rem;
		display: inline-block;
		width: 29%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile_search .hotSearch {
		margin: 0 0.5rem;
	}

	.mobile_search .hotSearch span {
		background-color: #e1e1e1;
		border-radius: 0.2rem;
		margin: 0.5rem 0.5rem;
		text-align: center;
		line-height: 2rem;
		display: inline-block;
		width: 29%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile_search .searchType {
		background-color: #d9d9d9;
		margin-top: -0.1rem;
	}

	.mobile_search .searchType ul {
		display: flex;
		height: 2.5rem;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		margin: 0 1rem;
		font-size: 1.1rem;
		list-style: none;
		margin-bottom: 1rem;
	}

	.mobile_search .searchType ul li a {
		color: #343434;
	}

	.mobile_search .searchType ul li .router-link-active {
		/* border-bottom: 0.3rem solid rgb(184, 25, 32); */
	}

	.mobile_search .tab li {
		width: 70%;
		height: 3rem;
		margin: 1rem 0.5rem;
		background: linear-gradient(to bottom, #debab7, #ffe9e6);
		border-radius: 0.6rem;
		line-height: 3rem;
		/* 字符缩进 */
		text-indent: 1rem;
	}

	.mobile_search .show {
		display: flex;
		margin: 1rem 0.5rem;
	}

	.mobile_search .show img {
		width: 6rem;
		height: 20%;
	}

	.mobile_search .show div p {
		margin: 0.2rem 0.4rem;
	}
</style>